<template>
  <div id="PurchaseIndex">
    <div class="right-tab">
      <router-link to="/receivables">
        <img src="../../assets/images/shouqian.png" alt="">
      </router-link>
    </div>
    <!--搜索框-->
    <x-header slot="header" :left-options="{showBack: false}">
      <div class="search">
        <x-input v-model="searchValue">
          <img style="height:16px;vertical-align: -14%;" slot="right-full-height" src="../../assets/images/sousuo.png">
        </x-input>
      </div>
      <div slot="right">
        <router-link to="">
          <img src="../../assets/images/tubiao_03.png" alt="">
        </router-link>
      </div>
      <div slot="left">
        <router-link to="">
          <img src="../../assets/images/top_one.png" alt="">
        </router-link>
      </div>
    </x-header>
    <!--搜索框-->
    <!-- 通知 -->
    <swiper auto height="30px" direction="vertical" :interval=2000 class="renav-scroll" :show-dots="false">
      <!--<swiper-item>您有{{integral}}积分，可参加积分兑换</swiper-item>-->
      <swiper-item>您有{{integral}}积分，可参加积分兑换</swiper-item>
      <swiper-item v-for="(item,index) in message" :key="index">{{item.data}}</swiper-item>
    </swiper>
    <!-- 通知 -->
    <!-- 轮播 -->
    <swiper loop auto @on-index-change="onIndexChange" dots-position="center">
      <swiper-item class="swiper-demo-img" v-for="(item, index) in imgList" :key="index">
        <a :href="item.url">
          <img :src="item.car_img">
        </a>
      </swiper-item>
    </swiper>
    <!-- 轮播 -->
    <!--活动位 有秒杀-->
      <!--秒杀-->
      <group v-if="isType==1">
          <div class="weui-media-box">
            <p style="font-weight: bold;">{{msGoods.type}}</p>
            <router-link to="" class="weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img :src="msGoods.sy_img" alt="" class="weui-media-box__thumb">
                </div>
                <div class="weui-media-box__bd">
                    <h2 style="color: #333">{{msGoods.gk_name}}</h2>
                    <div class="go-cont">
                      <div>
                        <p>￥{{msGoods.price}}<span>￥{{msGoods.price_before}}</span></p>
                        <p class="tiem" v-for="(it,i) in timeInterval" :key="i" v-if="it.id==msGoods.a_id">剩余时间: <i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i></p>
                      </div>
                      <router-link class="go-link" to="">
                        马上抢 >
                      </router-link>
                    </div>
                </div>
            </router-link>
          </div>
      </group>
      <!--秒杀-->
      <!--秒杀活动1-1-->
      <group v-if="isType==2">
        <x-table class="ms" full-bordered style="background-color:#fff;">
          <tbody>
          <tr>
            <td width="47%">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p class="huang">{{msGoods.type}}</p>
                  <div class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="msGoods.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{msGoods.gk_name}}</p>
                      <p class="price">￥{{msGoods.price}}<span>￥{{msGoods.price_before}}</span></p>
                      <p class="tiem" v-for="(it,i) in timeInterval" :key="i" v-if="it.id==msGoods.a_id"><b><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i></b></p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
            <td v-for="(item,index) in goods" :key="index" v-if="index<1 && isType==2">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p style="color: #000">{{item.type}}</p>
                  <div to="" class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}<span class="price_hui" v-if="item.price_before">￥{{item.price_before}}</span></p>
                      <p class="hui">￥{{msGoods.price_before}}</p>
                      <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                      <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                      <p class="tiem" v-if="item.day_type==0">已开团</p>
                      <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
          </tr>
          </tbody>
        </x-table>

      </group>
      <!--秒杀1-1-->
      <!--秒杀活动1-2-->
      <group v-if="isType==3">
        <x-table class="ms" full-bordered style="background-color:#fff;">
          <tbody>
          <tr>
            <td rowspan="2" width="39%">
              <router-link to="" class="left-goods">
                <p class="title">{{msGoods.type}}</p>
                <p class="tiem" v-for="(it,i) in timeInterval" :key="i" v-if="it.id==msGoods.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i></p>
                <p>
                  <img :src="msGoods.sy_img" alt="" class="weui-media-box__thumb">
                </p>
                <p class="dec">{{msGoods.gk_name}}</p>
                <p class="price">￥{{msGoods.price}}</p>
                <p class="price_hui">￥{{msGoods.price_before}}</p>
              </router-link>
            </td>
            <td v-for="(item,index) in goods" :key="index" v-if="index<1 && isType==3">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p style="color: #000">{{item.type}}</p>
                  <div class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}<span class="price_hui" v-if="item.price_before">￥{{item.price_before}}</span></p>
                      <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                      <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                      <p class="tiem" v-if="item.day_type==0">已开团</p>
                      <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
          </tr>
          <tr>
            <td v-for="(item,index) in goods" :key="index" v-if="index>0 && index<2 && isType==3">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p style="color: #000">{{item.type}}</p>
                  <div class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}<span class="price_hui" v-if="item.price_before">￥{{item.price_before}}</span></p>
                      <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                      <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                      <p class="tiem" v-if="item.day_type==0">已开团</p>
                      <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
          </tr>
          </tbody>
        </x-table>

      </group>
      <!--秒杀1-2-->
      <!--秒杀活动1-3-->
      <group v-if="isType==4">
        <x-table class="ms" full-bordered style="background-color:#fff;">
          <tbody>
          <tr>
            <td rowspan="2">
              <router-link to="" class="left-goods">
                <p class="title">{{msGoods.type}}</p>
                <p class="tiem" v-for="(it,i) in timeInterval" :key="i" v-if="it.id==msGoods.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i></p>
                <p>
                  <img :src="msGoods.sy_img" alt="" class="weui-media-box__thumb">
                </p>
                <p class="dec">{{msGoods.gk_name}}</p>
                <p class="price">￥{{msGoods.price}}</p>
                <p class="price_hui">￥{{msGoods.price_before}}</p>
              </router-link>
            </td>
            <td width="34%" v-for="(item,index) in goods" :key="index" v-if="index<2 && isType==4">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right">
                  <p style="color: #000">{{item.type}}</p>
                  <div to="" class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}</p>
                      <p class="price_hui" v-if="item.price_before">￥{{item.price_before}}</p>
                    </div>
                  </div>
                  <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                  <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                  <p class="tiem" v-if="item.day_type==0">已开团</p>
                  <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                </div>
              </router-link>
            </td>
          </tr>
          <tr>
            <td colspan="2" v-for="(item,index) in goods" :key="index" v-if="index>1 && index<3 && isType==4">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p style="color: #000">{{item.type}}</p>
                  <div to="" class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                      <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                      <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                      <p class="tiem" v-if="item.day_type==0">已开团</p>
                      <p class="price">￥{{item.price}}<span class="price_hui" v-if="item.price_before">￥{{item.price_before}}</span></p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
          </tr>
          </tbody>
        </x-table>

      </group>
      <!--秒杀1-3-->
      <!--秒杀活动1-4-->
      <group v-if="isType==5">
        <x-table class="ms" full-bordered style="background-color:#fff;">
          <tbody>
          <tr>
            <td rowspan="2">
              <router-link to="" class="left-goods">
                <p class="title">{{msGoods.type}}</p>
                <p class="tiem" v-for="(it,i) in timeInterval" :key="i" v-if="it.id==msGoods.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i></p>
                <p>
                  <img :src="msGoods.sy_img" alt="" class="weui-media-box__thumb">
                </p>
                <p class="dec">{{msGoods.gk_name}}</p>
                <p class="price">￥{{msGoods.price}}</p>
                <p class="price_hui">￥{{msGoods.price_before}}</p>
              </router-link>
            </td>
            <td width="33%" v-for="(item,index) in goods" :key="index" v-if="index<2 && isType==5">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right">
                  <p style="color: #000">{{item.type}}</p>
                  <div to="" class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}</p>
                      <p class="price_hui" v-if="item.price_before">￥{{item.price_before}}</p>
                    </div>
                  </div>
                  <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                  <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                  <p class="tiem" v-if="item.day_type==0">已开团</p>
                  <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                </div>
              </router-link>
            </td>
          </tr>
          <tr>
            <td width="34%" v-for="(item,index) in goods" :key="index" v-if="index>1 && index<4 && isType==5">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right">
                  <p style="color: #000">{{item.type}}</p>
                  <div class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}</p>
                      <p class="price_hui" v-if="item.price_before">￥{{item.price_before}}</p>
                    </div>
                  </div>
                  <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                  <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                  <p class="tiem" v-if="item.day_type==0">已开团</p>
                  <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                </div>
              </router-link>
            </td>
          </tr>
          </tbody>
        </x-table>

      </group>
      <!--秒杀活动1-4-->

      <!--无秒杀-1-->
      <group v-if="isGoods==1">
        <div class="weui-media-box"  v-for="(item,index) in goods" :key="index" v-if="index<1 && isGoods==1">
          <p style="font-weight: bold">{{item.type}}</p>
          <router-link to="" class="weui-media-box_appmsg">
            <div class="weui-media-box__hd">
              <img :src="item.sy_img" alt="" class="weui-media-box__thumb">
            </div>
            <div class="weui-media-box__bd">
              <h2 style="color: #333">{{item.gk_name}}</h2>
              <div class="go-cont">
                <div>
                  <!--<p>￥{{item.price}}<span>￥18.00</span></p>-->
                  <!--<p class="tiem">剩:0天 <b><i>00</i>:<i>00</i>:<i>00</i> </b></p>-->
                  <p class="price">￥{{item.price}}<span class="price_hui" v-if="item.price_before">￥{{item.price_before}}</span></p>
                  <p class="tiem" v-if="item.day_type==2">剩余时间: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                  <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                  <p class="tiem" v-if="item.day_type==0">已开团<em>截止{{item.end_time}}</em></p>
                </div>
                <router-link class="go-link" to="">
                  马上抢 >
                </router-link>
              </div>
            </div>
          </router-link>
        </div>
      </group>
      <!--无秒杀-1-->
      <!--无秒杀-2-->
      <group v-if="isGoods==2">
        <x-table class="ms" full-bordered style="background-color:#fff;">
          <tbody>
          <tr>
            <td v-for="(item,index) in goods" :key="index" v-if="index<2 && isGoods==2">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p style="color: #000">{{item.type}}</p>
                  <div to="" class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}</p>
                      <p class="price_hui" v-if="item.price_before">￥{{item.price_before}}</p>
                      <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                      <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                      <p class="tiem" v-if="item.day_type==0">已开团</p>
                      <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
          </tr>
          </tbody>
        </x-table>
      </group>
      <!--无秒杀-2-->
      <!--无秒杀-3-->
      <group v-if="isGoods==3">
        <x-table class="ms" full-bordered style="background-color:#fff;">
          <tbody>
          <tr>
            <td v-for="(item,index) in goods" :key="index" v-if="index<2 && isGoods==3">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p style="color: #000">{{item.type}}</p>
                  <div to="" class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}</p>
                      <p class="price_hui" v-if="item.price_before">￥{{item.price_before}}</p>
                      <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                      <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                      <p class="tiem" v-if="item.day_type==0">已开团</p>
                      <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
          </tr>
          <tr>
            <td colspan="2" v-for="(item,index) in goods" :key="index" v-if="index>1 && index<3 && isGoods==3">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p style="color: #000">{{item.type}}</p>
                  <div to="" class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                      <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                      <p class="tiem" v-if="item.day_type==0">已开团<em>截止{{item.end_time}}</em></p>
                      <p class="price">￥{{item.price}}<span class="price_hui" v-if="item.price_before">￥{{item.price_before}}</span></p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
          </tr>
          </tbody>
        </x-table>

      </group>
      <!--无秒杀-3-->
      <!--无秒杀-4-->
      <group v-if="isGoods==4">
        <x-table class="ms" full-bordered style="background-color:#fff;">
          <tbody>
          <tr>
            <td width="50%" v-for="(item,index) in goods" :key="index" v-if="index<2 && isGoods==4">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p style="color: #000">{{item.type}}</p>
                  <div to="" class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}</p>
                      <p class="price_hui" v-if="item.price_before">￥{{item.price_before}}</p>
                      <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                      <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                      <p class="tiem" v-if="item.day_type==0">已开团<em>截止{{item.end_time}}</em></p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
          </tr>
          <tr>
            <td width="50%" v-for="(item,index) in goods" :key="index" v-if="index>1 && index<4 && isGoods==4">
              <router-link to="">
                <div class="weui-media-box weui-media-box-right weui-media-box-right-2">
                  <p style="color: #000">{{item.type}}</p>
                  <div to="" class="weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                      <img :src="item.sy_img" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <p>{{item.gk_name}}</p>
                      <p class="price">￥{{item.price}}</p>
                      <p class="price_hui" v-if="item.price_before">￥{{item.price_before}}</p>
                      <p class="tiem" v-if="item.day_type==2">剩: <b v-for="(it,i) in timeInterval" :key="i" v-if="it.id==item.a_id"><i>{{it.hour}}</i>:<i>{{it.min}}</i>:<i>{{it.sec}}</i> </b></p>
                      <p class="tiem" v-if="item.day_type==1">剩余时间:{{item.day}}天</p>
                      <p class="tiem" v-if="item.day_type==0">已开团</p>
                      <p class="hui" v-if="item.day_type==0">截止{{item.end_time}}</p>
                    </div>
                  </div>
                </div>
              </router-link>
            </td>
          </tr>
          </tbody>
        </x-table>
      </group>
      <!--无秒杀-4-->
    <!--活动位-->
    <group>
        <a href="javascript:;">
          <img style="width:100%;display:block;height:2rem;" :src="huanxinImg" alt="">
        </a>
    </group>
    <group>
      <divider>常用品类</divider>
      <x-table class="pin" full-bordered style="background-color:#fff;">
        <tbody>
          <tr>
              <td>
                <div class="flex-box flex-box-2">
                  <router-link :to="{ path: 'list/tire', query: { id: '14',name:'轮胎' }}">
                    <p>轮胎</p>
                    <div class="flex-img">
                      <img src="../../assets/images/luntai.png" alt="">
                      <div>
                        <p>最新精品</p>
                        <p class="red">今日上架</p>
                      </div>
                    </div>
                  </router-link>
                </div>
              </td>
              <td>
                <div class="flex-box">
                  <router-link :to="{ path: 'list/battery', query: { id: '10',name:'电池' }}">
                    <p>电池</p>
                    <div class="flex-img">
                      <img src="../../assets/images/dianchi_index.png" alt="">
                    </div>
                  </router-link>
                </div>
              </td>
          </tr>
        </tbody>
      </x-table>
      <x-table class="pin" full-bordered style="background-color:#fff;">
        <tbody>
          <tr>
            <td>
              <div class="flex-box flex-box-4">
                <router-link :to="{ path: 'list/tire', query: { id: '13',name:'充电器' }}">
                  <p>充电器</p>
                  <div class="flex-img">
                    <img src="../../assets/images/chongdianqi.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-4">
                <router-link :to="{ path: 'list/tire', query: { id: '11',name:'控制器' }}">
                  <p>控制器</p>
                  <div class="flex-img">
                    <img src="../../assets/images/kongzhiqi.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-4">
                <router-link :to="{ path: 'list/tire', query: { id: '271',name:'锁具' }}">
                  <p>锁具</p>
                  <div class="flex-img">
                    <img src="../../assets/images/suoju.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-4 flex-box-none">
                <router-link :to="{ path: 'list/tire', query: { id: '364',name:'轴承' }}">
                  <p>轴承</p>
                  <div class="flex-img">
                    <img src="../../assets/images/zhoucheng.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="flex-box flex-box-4">
                <router-link :to="{ path: 'list/tire', query: { id: '47',name:'开关锁' }}">
                  <p>开关锁</p>
                  <div class="flex-img">
                    <img src="../../assets/images/kaiguansuo.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-4">
                <router-link :to="{ path: 'list/tire', query: { id: '33',name:'转把' }}">
                  <p>转把</p>
                  <div class="flex-img">
                    <img src="../../assets/images/zhuanba.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-4">
                <router-link :to="{ path: 'list/tire', query: { id: '506',name:'灯' }}">
                  <p>灯</p>
                  <div class="flex-img">
                    <img src="../../assets/images/deng.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-4 flex-box-none">
                <router-link :to="{ path: 'list/tool', query: { tool:'1',name:'开关' }}">
                  <p>开关</p>
                  <div class="flex-img">
                    <img src="../../assets/images/kaiguan.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="flex-box flex-box-4">
                <router-link :to="{ path: 'list/tire', query: { id: '563',name:'减震器' }}">
                  <p>减震器</p>
                  <div class="flex-img">
                    <img src="../../assets/images/jianzhenqi.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-4">
                <router-link :to="{ path: 'list/tire', query: { id: '223',name:'喇叭' }}">
                  <p>喇叭</p>
                  <div class="flex-img">
                    <img src="../../assets/images/laba.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-4">
                <router-link :to="{ path: 'list/tire', query: { id: '461',name:'刹车总成' }}">
                  <p>刹车总成</p>
                  <div class="flex-img">
                    <img src="../../assets/images/shachezongcheng.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-4 flex-box-none">
                <router-link :to="{ path: 'list/tire', query: { id: '34',name:'闸' }}">
                  <p>闸</p>
                  <div class="flex-img">
                    <img src="../../assets/images/zha.png" alt="">
                  </div>
                </router-link>
              </div>
            </td>
          </tr>
        </tbody>
      </x-table>
     </group>
    <group>
      <divider>非常用品类</divider>
      <x-table class="pin" full-bordered style="background-color:#fff;">
        <tbody>
          <tr>
            <td>
              <div class="flex-box flex-box-6">
                <router-link :to="{ path: 'list/tool', query: { tool:'2',name:'转换器'}}">
                  <div class="flex-img">
                    <img src="../../assets/images/zhuanhuanqi.png" alt="">
                  </div>
                  <p>转换器</p>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-6">
                <router-link :to="{ path: 'list/tire', query: { id: '136',name:'电机' }}">
                  <div class="flex-img">
                    <img src="../../assets/images/dianji.png" alt="">
                  </div>
                  <p>电机</p>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-6">
                <router-link :to="{ path: 'list/tire', query: { id: '324',name:'轮毂/钢圈' }}">
                  <div class="flex-img">
                    <img src="../../assets/images/lunyi.png" alt="">
                  </div>
                  <p>轮毂/钢圈</p>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-6">
                <router-link :to="{ path: 'list/tool', query: { tool:'3',name:'制动配件' }}">
                  <div class="flex-img">
                    <img src="../../assets/images/zhidongpeijian.png" alt="">
                  </div>
                  <p>制动配件</p>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-6 flex-box-none">
                <router-link :to="{ path: 'list/tool', query: { tool:'4',name:'维修工具' }}">
                  <div class="flex-img">
                    <img src="../../assets/images/weixiugongju.png" alt="">
                  </div>
                  <p>维修工具</p>
                </router-link>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="flex-box flex-box-6">
                <router-link :to="{ path: 'list/tool', query: { tool:'5',name:'通用配件' }}">
                  <div class="flex-img">
                    <img src="../../assets/images/tongyongpeijian.png" alt="">
                  </div>
                  <p>通用配件</p>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-6">
                <router-link :to="{ path: 'list/tool', query: {tool:'6',name:'电器配件' }}">
                  <div class="flex-img">
                    <img src="../../assets/images/dianqipeijian.png" alt="">
                  </div>
                  <p>电器配件</p>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-6">
                <router-link :to="{ path: 'list/tool', query: { tool:'7',name:'行驶部件' }}">
                  <div class="flex-img">
                    <img src="../../assets/images/xiangshibujian.png" alt="">
                  </div>
                  <p>行驶部件</p>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-6">
                <router-link to="">
                  <div class="flex-img">
                    <img src="../../assets/images/zhidongpeijian.png" alt="">
                  </div>
                  <p>塑件</p>
                </router-link>
              </div>
            </td>
            <td>
              <div class="flex-box flex-box-6 flex-box-none">
                <router-link :to="{ path: 'list/tire', query: { id: '254',name:'打气筒' }}">
                  <div class="flex-img">
                    <img src="../../assets/images/daqitong.png" alt="">
                  </div>
                  <p>打气筒</p>
                </router-link>
              </div>
            </td>
          </tr>
        </tbody>
      </x-table>
    </group>
    <div v-transfer-dom>
      <alert v-model="showAlertMsg"> {{ contentAlert }}</alert>
    </div>
  </div>
</template>

<script>
  import { XHeader,TransferDom,cookie,XInput,Swiper,SwiperItem,Group,Divider,Flexbox, FlexboxItem,XTable,Alert} from 'vux'
  import { Decrypt} from '../../aes/aes';
  import { sorts,sign } from '../../aes/make';
  import { purchase } from '../../mock/api'
  import { publicObject } from '../../assets/js/public'
  export default {
    directives: {
      TransferDom
    },
    components: {
      XHeader,
      XInput,
      Swiper,
      SwiperItem,
      Group,
      Divider,
      Flexbox,
      FlexboxItem,
      XTable,
      Alert
    },
    data () {
      return {
        showAlertMsg: false,
        contentAlert:'',
        searchValue:'',
        imgList: [{
          url: '',
          img: ''
        }],
        integral:0,
        huanxinImg:'',
        isType:0,
        isGoods:0,
        goods:[],
        msGoods:{},
        message:[],
        timeInterval:[],
        timeName:''
      }
    },
    created () {
      let vue = this;
      // vue.updateTitle('能源宝');
    },
    mounted(){
        this.msgFun();
    },
    methods: {
      onIndexChange (index) {
        this.demo06_index = index
      },
      msgFun(){
        let vue=this;
        var uid=cookie.get('uid');
        var gid=cookie.get('gid');
        var access_token=cookie.get('access_token');
        var so=sorts();
        var json={
          gid:gid,
          sorts:so,
          uid:uid,
          access_token:access_token
        }
        var si=sign(json);
        json['sign']=si;
        purchase(json).then((res)=>{
          if(res.code==2000){
            // var data=Decrypt(res.data);
            // data=JSON.parse(data);
            var data=res.data;
            console.log(data);
            this.imgList=data.lunbo;
            this.integral=data.integral;
            this.huanxinImg=data.huanxin_img;
            this.message=data.message;
            this.timeInterval=[];
            var typeIn=0;
            if(data.ms_html==''){
              this.isType=0;
              this.isGoods=data.qt_html.length;
              // this.isGoods=1;
            }else{
              this.isType=data.qt_html.length+1;
              // this.isType=5;
              this.isGoods=0;
              this.msGoods=data.ms_html;
              var msTime={
                id:data.ms_html.a_id,
                endTime:data.ms_html.end_time,
                hour:'00',
                min:'00',
                sec:'00'
              }
              this.timeInterval.push(msTime);
            }
            // this.isType=0;
            // this.isGoods=4;
            if(data.qt_html!=''){
              var json={};
              var index=0;
              var date=new Date();
              // var date='2018-04-18 11:59:59';
              for (var i in data.qt_html) {
                var day=publicObject.datedifference(data.qt_html[i].end_time,date);
                if (data.qt_html[i].type === '团购') {
                  data.qt_html[i].day_type=0;
                  json=data.qt_html[i];
                  index=i;
                }else if(day>0){
                  data.qt_html[i].day_type=1;
                  data.qt_html[i].day=day;
                }else if(day<1){
                  data.qt_html[i].day_type=2;
                  typeIn=1;
                  var jsonTime={
                    id:data.qt_html[i].a_id,
                    endTime:data.qt_html[i].end_time,
                    hour:'00',
                    min:'00',
                    sec:'00'
                  }
                  this.timeInterval.push(jsonTime);
                  // var time=data.qt_html[i].end_time;
                  // var timeName=data.qt_html[i].a_id;
                  // window.clearInterval(timeName);
                  // timeName =window.setInterval(function(){
                  //   let nowTime = new Date();
                  //   let endTime = new Date(time);
                  //   let t = endTime.getTime() - nowTime.getTime();
                  //   if(t>0){
                  //     let day = Math.floor(t/86400000);
                  //     let hour=Math.floor((t/3600000)%24);
                  //     let min=Math.floor((t/60000)%60);
                  //     let sec=Math.floor((t/1000)%60);
                  //     hour = hour < 10 ? "0" + hour : hour;
                  //     min = min < 10 ? "0" + min : min;
                  //     sec = sec < 10 ? "0" + sec : sec;
                  //     if(day > 0){
                  //       var jsonTime={
                  //         day:day,
                  //         hour:hour,
                  //         min:min,
                  //         sec:sec
                  //       }
                  //     }
                  //     if(day <= 0 && hour > 0 ){
                  //       var jsonTime={
                  //         hour:hour,
                  //         min:min,
                  //         sec:sec
                  //       }
                  //     }
                  //     if(day <= 0 && hour <= 0){
                  //       var jsonTime={
                  //         min:min,
                  //         sec:sec
                  //       }
                  //     }
                  //
                  //   }else{
                  //     clearInterval(timeName);
                  //   }
                  // },1000);
                }
                if(data.qt_html[i].quota){
                  data.qt_html[i].price=data.qt_html[i].quota;
                }
                if(data.qt_html[i].r_price){
                  data.qt_html[i].price=data.qt_html[i].r_price;
                }
              }
              if(typeIn==1){
                this.intervalFun();
              }
              data.qt_html.splice(index, 1);
              data.qt_html.push(json);
              this.goods=data.qt_html;
            }
          }else if(res.code > 3000 &&  res.code < 4000){
            this.showAlertMsg=true;
            this.contentAlert=res.message;
            setTimeout(function(){
              vue.$router.replace({name: 'login'});
            },1200)
          }else{
            this.showAlertMsg=true;
            this.contentAlert=res.message;
          }
        })
      },
      intervalFun(){
        let vue=this;
        window.clearInterval(this.timeName);
        this.timeName =window.setInterval(function(){
          for(var i in vue.timeInterval){
            let nowTime = new Date();
            let endTime = new Date(vue.timeInterval[i].endTime);
            let t = endTime.getTime() - nowTime.getTime();
            if(t>0){
              let hour=Math.floor(t / 1000 / 60 / 60 % 24);
              let min=Math.floor(t / 1000 / 60 % 60);
              let sec=Math.floor(t / 1000 % 60);
              hour = hour < 10 ? "0" + hour : hour;
              min = min < 10 ? "0" + min : min;
              sec = sec < 10 ? "0" + sec : sec;
              vue.timeInterval[i].hour=hour;
              vue.timeInterval[i].min=min;
              vue.timeInterval[i].sec=sec;
            }else{
              clearInterval(this.timeName);
            }
          }
        },1000);
      }
    },
    beforeDestroy(){
      window.clearInterval(this.timeName);
    }
  }
</script>
<style lang="less" scoped>
  @green:#51ac33;
  @blue:#1babe3;
  @huang:#ff6000;
  @red:#ff0000;
  #PurchaseIndex{
    background-color: #F5F5F5;
    margin-bottom: 4.8em;
    .box{
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      padding: 0 5px;
      div{
        background-color: white;
        flex: 0 0 25%;
        height: 100px;
        div{
          margin: 5px;
          border: 1px solid red;

        }
      }
    }
    .red{
      color: @red;
    }
    .huang{
      color: @huang !important;
    }
    .price_hui{
      color: #999999 !important;
      font-size: 12px !important;
      text-decoration:line-through;
    }
    .weui-cells:after{
      border-bottom: 0px;
    }
    .ms tbody{
      vertical-align: text-top;
    }
    .right-tab{
      position: fixed;
      right:-3px;
      top:50%;
      z-index: 100;
      margin-top: -0.8rem;
      img{
        width: 1.6rem;
        height: 1.6rem;
      }
    }
    .weui-media-box{
      padding: 5px 0.7em;
      p{
        color:@huang ;
        font-size: 17px;
        margin-bottom: 5px;
        span{
          color: #999999;
          margin-left: 1em;
          text-decoration:line-through;
        }
        em{
          color: #999999;
          font-size: 12px;
          line-height: 14px;
          font-style:normal;
          margin-left: 8px;
        }
      }
      .hui{
        color: #999999;
        font-size: 12px !important;
        line-height: 14px;
        font-style:normal;
      }
    }
    .weui-media-box_appmsg{
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      h2{
        font-size: 17px;
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
    .weui-media-box__hd {
      margin-right: .8em;
      width: 90px;
      height: 90px;
      line-height: 90px;
      text-align: center;
    }
    .go-cont{
      overflow: hidden;
      div{
        float: left;
      }
      a{
        float: right;
        display: inline-block;
        font-size: 12px;
        padding: 5px;
        background: @red;
        color: #fff;
        border-radius: 5px;
        margin-top: 2.2em;
      }
    }
    .weui-media-box_appmsg img {
      width: 100%;
      height: 100%;
      vertical-align: top;
    }
    .weui-media-box__bd {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      min-width: 0;
    }
    .tiem{
      color: #999999 !important;
      margin-top: 8px;
      font-size: 15px !important;
      i{
        background-color: #000;
        color: #ffffff;
        display: inline-block;
        width: 18px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 0 1px;
        font-size: 12px;
        border-radius: 3px;
      }
    }
    .ms.vux-table td, .vux-table th{
      padding:0.7em 0.5em 0.2em;
      text-align: left;
    }
    .ms.vux-table{
      line-height: 16px;
    }
    .left-goods{
      .title{
        color: @huang;
        font-size: 17px;
        height: 19px;
      }
      img{
        width: 85%;
        margin-top: 8px;
      }
      .dec{
        margin-top: 3px;
        font-size: 15px;
      }
      .price{
        color: @red;
        margin-top: 8px;
        font-size: 15px;
        margin-bottom: 3px;
      }
      .tiem{
        margin-top: 15px;
      }
    }
    .weui-media-box.weui-media-box-right{
      padding: 0;
    }
    .weui-media-box-right{
        p{
          color: #646464;
          font-size: 16px;
          text-align: left;
        }
      .weui-media-box_appmsg{
        margin-top: 10px;
      }
      .weui-media-box__hd{
        width: 50px;
        height: 50px;
        margin-right: 0.8em;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .weui-media-box__bd{
        p{
          font-size: 14px;
        }
      }
      .price{
        color: @red;
      }
      .tiem{
        font-size: 12px !important;
        color: @red !important;
        i{
          margin: 0;
          width: 16px;
        }
      }
    }
    .weui-media-box-right-2{
      .weui-media-box__hd{
        width: 60px;
        height: 60px;
      }
      .weui-media-box__bd{
        p{
          font-size: 15px;
        }
      }
      .price{
        font-size: 15px;
      }
      .tiem{
        font-size: 14px !important;
      }
    }

    .vux-table.vux-table-bordered:before,.vux-table:after,.vux-table.vux-table-bordered tr td:last-child:after, .vux-table.vux-table-bordered tr th:last-child:after{
      border-left:0;
      border-right:0;
      border-top:0;
      border-bottom:0;
    }
    .weui-cells:after{
      border-bottom: 0px;
    }
  }
  #PurchaseIndex .vux-header-title {
    font-size: 16px;
  }
  #PurchaseIndex .menu {
    margin-right: 70px;
  }
  #PurchaseIndex .menu div {
    color: #000;
  }
  #PurchaseIndex .menu:before {
    right: -70px;
  }
  #PurchaseIndex .vux-header{
    background-color: @green !important;
    .vux-header-title{
      color:#fff !important;
    }
    .vux-header-right a{
      color: #ffffff !important;
    }

  }
  #PurchaseIndex .vux-header .vux-header-left .left-arrow:before{
    border:1px solid #ffffff !important;
    border-width:1px 0 0 1px !important;
  }
  #PurchaseIndex .search{
    height: 80%;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    .vux-x-input.weui-cell{
      padding: 5px 10px;
      height: 100%;
      margin-top: 4px;
    }
  }
  #PurchaseIndex{
    .renav-scroll{
      background: #faf498  url(../../assets/images/xiaoxi.png) no-repeat left;
      background-size: 16px 16px;
      background-position-x: 5px;
      padding-left: 28px;
      line-height: 34px;
      height: 33px;
    }
    .vux-divider{
      background-color: #fafafa;
    }
    .vux-slider > .vux-indicator > a > .vux-icon-dot.active{
      background-color: @huang !important;
    }
    .vux-slider > .vux-swiper > .vux-swiper-item > a{
      color: #323232;
    }
    .vux-flexbox .vux-flexbox-item{
      margin-left: 0px !important;
    }
    .flex-box{
      padding: 5px 0.7em;
      p{
        font-size: 16px;
        line-height: 21px;
        text-align: left;
      }
      img{
        width: 92%;
        margin-top: 10px;
        /*height: 2rem;*/
      }
    }
    .flex-box-2{
      overflow: hidden;
      .flex-img img{
        margin-left: -10%;
        width: 78%;
        float: left;
      }
     .flex-img div{
        float: left;
        margin-top: 12%;
        p{
          font-size: 12px;
          margin-top: 3px;
        }
      }
    }
    .flex-box-4{
      overflow: hidden;
      text-align: center;
      p{
        font-size: 15px;
        text-align: center;
      }
      .flex-img img{
        width: 100%;
      }
    }
    .flex-box-6{
      overflow: hidden;
      text-align: center;
      p{
        font-size: 12px;
        text-align: center;
      }
      .flex-img img{
        width: 100%;
      }
    }
  }
</style>
